<template>
  <div class="title">
    <p>推荐关注</p>
    <p class="right">
      <el-button
        type="info"
        size="default"
        icon="ele-RefreshRight"
        class="elbutton"
      ></el-button>
      换一批
    </p>
  </div>
  <WatchCard />
  <VideoCard :videoData="videoList" />
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Watch',
});
</script>

<script setup lang="ts">
import WatchCard from './components/WatchCard/index.vue';
import VideoCard from '@/components/VideoCard/index.vue';
import type { videoListContentType } from '@/api/resource/resourceType';
import { onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useResourceStore } from '@/store/resource';
import { ElLoading, ElMessage } from 'element-plus';

const resourceStore = useResourceStore();
const { videoList } = storeToRefs(resourceStore);
const { getIntegrated } = resourceStore;

// 初始化请求 综合榜
onMounted(async () => {
  try {
    ElLoading.service({ fullscreen: true });
    await getIntegrated(1, 10);
    ElLoading.service({ fullscreen: true }).close();
  } catch (error:any) {
    ElMessage.error(error)
  }
});
</script>

<style scoped lang="less">
.title {
  display: flex;
  justify-content: space-between;
  p {
    margin-top: 20px;
    color: #b1b1b1;
    font-size: 14px;
  }
  .right {
    cursor: pointer;
    .elbutton {
      background-color: #f5f7f9;
      color: #b1b5c1;
      font-size: 18px;
      border: none;
      padding-right: 2px;
    }
  }
}
</style>
